<template>
  <!-- `SideItem`为递归组件 -->
  <el-menu :default-active="defaultActiveStr" :default-openeds="defaultOpeneds" @open="open" @close="close">
    <SideItem v-for="item in recursionList" :key="item.name" :item="item"
              :defaultOpeneds="defaultOpeneds" v-bind="$attrs" v-on="$listeners"/>
  </el-menu>
</template>

<script>

import SideItem from './SideItem.vue'

export default {
  components: { SideItem },
  inheritAttrs: false,
  props: {
    recursionList: { default: () => [] }
  },
  data: () => ({
    defaultOpeneds: [], // 是 el组件的index属性 ( 字符串 )
    defaultActiveStr: '0'
  }),
  methods: {
    open(indexStr) {
      this.defaultOpeneds.push(indexStr)
    },
    close(indexStr) {
      const kdx = this.defaultOpeneds.findIndex(x => x === indexStr)
      this.defaultOpeneds.splice(kdx, 1)
    }
  }

}
</script>
<style lang="scss" scoped>

</style>
